/// <reference path="../../../Content/shared/_variables-shared.scss" />
/// <reference path="../../../Content/bs4/scss/bootstrap.scss" />


// Theme specific (non-bootstrap) variables
// ========================================

$boxed:                         false !default;
$site-bg:                       $gray-100 !default;

$btn-secondary-bg:				#fff !default;
$btn-secondary-border:			$gray-400 !default;

$header-bg:                     transparent !default;
$header-color:                  $body-color !default;
$header-color-muted:            $text-muted !default;
$header-hover-bg:               rgba(#000, 0.03) !default;
$header-border-color:           #ddd !default; 
$header-inverse-color:          #fff !default;
$header-inverse-color-muted:    rgba(#fff, 0.5) !default;
$header-inverse-hover-bg:       rgba(#fff, 0.15) !default;
$header-inverse-border-color:   rgba(#fff, 0.15) !default;
$header-selected-color:         $warning !default;
$header-inverse-selected-color: $header-selected-color !default;

$menubar-bg:                    transparent !default;
$shopbar-bg:                    transparent !default;
$megamenu-bg:                   $gray-100 !default;
$megamenu-navlink-font-size:    1rem !default;
$megamenu-line-height:          1.8 !default;

$menubar-color:                 lighten($header-color, 8%) !default;
$menubar-inverse-color:         $header-inverse-color-muted !default;
$shopbar-color:                 $header-color !default;
$shopbar-color-muted:           rgba($shopbar-color, 0.5);
$shopbar-inverse-color:         $header-inverse-color !default;
$shopbar-inverse-color-muted:   rgba($shopbar-inverse-color, 0.5);
$megamenu-color:                $header-color !default;
$megamenu-inverse-color:        $header-inverse-color !default;

$megamenu-dropdown-bg:          #fff !default;
$megamenu-text-color:           $body-color !default;
$megamenu-heading-color:        #222 !default;
$megamenu-subitem-color:        #999 !default;
$megamenu-rotator-bg:           rgba(255, 255, 255, 0.92) !default;

$searchbox-bg:                  #fff !default;
$searchbox-focus-bg:            #fff !default;
$searchbox-border-color:        rgba(0,0,0, 0.12) !default;
$searchbox-border-active-color: rgba(0,0,0, 0.2) !default;
$searchbox-hit-tag-color:       darken($warning, 10%) !default;

$footer-bg:                     $gray-100 !default;
$footer-color:                  $body-color !default;
$footer-color-muted:            $text-muted !default;
$footer-inverse-color:          #fff !default;
$footer-inverse-color-muted:    rgba(#fff, 0.5) !default;

$footer-social-bg:              #aaa !default;
$footer-social-color:           #fff !default;

$facet-control-size:			20px;


// Material tabs
// ==============================================================

$mtab-text-transform:		uppercase;
$mtab-font-weight:			$font-weight-normal;
$mtab-color:				inherit;

//
// Checkout Steps
// --------------------------------------------------

$costep-border:                 #f2f2f2;
$costep-bg:                     #fff; 
$costep-color:                  #ccc;
$costep-label-color:            $body-color;

$costep-visited-border:         $costep-progress-color;
$costep-visited-bg:             $costep-progress-color;
$costep-visited-color:          rgba(#fff, 0.85);
$costep-visited-label-color:    $costep-label-color;

$costep-active-border:          $costep-visited-border;
$costep-active-bg:              #fff;
$costep-active-color:           $body-color;
$costep-active-label-color:     $costep-label-color;


// Bootstrap variable overrides
// ========================================

$enable-rounded:                true;
$enable-shadows:                true;
$enable-gradients:              false;
$enable-transitions:            true;
$enable-hover-media-query:      false;
$enable-grid-classes:           true;

$theme-color-interval:		8%;
$yiq-contrasted-threshold:	164;
$yiq-text-dark:				$gray-900;
$yiq-text-light:			#fff;

$spacer: 1.25rem;
$spacers: ( 
	6: ($spacer * 4.5)
);

$theme-colors: ( 
	"gray": $gray-700 
);

$line-height-base:              1.5;
$line-height-sm:                1.5;
$line-height-lg:                (4 / 3);

$lead-font-size:                1rem;
$lead-font-weight:              $font-weight-light;
$small-font-size:               90%;

$display1-size:                 5.5rem;
$display2-size:                 5rem;
$display3-size:                 4.5rem;
$display4-size:                 3rem;

$display1-weight:               $font-weight-light;
$display2-weight:               $font-weight-light;
$display3-weight:               $font-weight-light;
$display4-weight:               $font-weight-light;

$btn-border-radius:             .125rem;
$btn-border-radius-lg:          .1875rem;
$btn-border-radius-sm:          .125rem;

// Shadows

$box-shadow-sm:               0 0 .625rem 0 rgba(#000, .05);
$box-shadow:                  0 1rem 2.25rem rgba(#32325d, .03), 0 0.3125rem 1rem rgba(#000, .12);
$box-shadow-lg:               0 1rem 3rem rgba(#000, .125);

$input-box-shadow:              none;
$input-focus-box-shadow:        none;
$input-border-radius:           $btn-border-radius;
$input-border-radius-lg:        $btn-border-radius-lg;
$input-border-radius-sm:        $btn-border-radius-sm;

// Equalize input vertical paddings with button paddings
$input-btn-focus-width:			.25rem;
$input-btn-focus-color:			rgba($primary, .25);
$input-btn-focus-box-shadow:	0 0 0 $input-btn-focus-width $input-btn-focus-color;
$input-btn-padding-x:			1rem;
$input-btn-padding-y:			0.625rem;
$input-btn-padding-x-sm:		0.75rem;
$input-btn-padding-y-sm:		0.5rem;
$input-btn-padding-x-lg:		1.5rem;
$input-btn-padding-y-lg:		0.875rem;
$input-btn-line-height:			1.5;
$input-box-shadow:				none;
$input-focus-box-shadow:		none;
$input-focus-border-color:		lighten($primary, 30%);
$input-transition:              none;
$input-group-addon-bg:			$gray-100;


$btn-font-weight:				$font-weight-medium;
$btn-focus-width:				0;
$btn-box-shadow:				inset 0 0 0 rgba(#fff, 0.15), 0 0 0 rgba(#000, 0.075);
$btn-focus-box-shadow:			$input-btn-focus-box-shadow;
$btn-active-box-shadow:			inset 0 3px 5px rgba(#000, .125);
$btn-transition:				background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out;
$btn-disabled-opacity:			0.5;


// Dropdown

$dropdown-box-shadow:			$box-shadow;
$dropdown-border-color:			rgba(#000, 0.05); 
$dropdown-link-active-color:    $dropdown-link-hover-color;
$dropdown-link-active-bg:       darken($dropdown-link-hover-bg, 4%);


// Modal

$modal-content-border-width:        0;
$modal-backdrop-opacity:            .55;
$modal-content-box-shadow-xs:       0 12px 26px rgba(#32325d, .12), 0 3px 10px rgba(#000, .08);
$modal-content-box-shadow-sm-up:    0 50px 100px rgba(#32325d, .1), 0 15px 35px rgba(#32325d, .15), 0 5px 15px rgba(#000, .1);


// Popover

$popover-box-shadow:			$dropdown-box-shadow;
$popover-border-color:			$dropdown-border-color;


// Pagination

$pagination-color:					$body-color;
$pagination-bg:						#fff;
$pagination-border-color:			$gray-300;

$pagination-hover-color:			$pagination-color;
$pagination-hover-bg:				$gray-200;
$pagination-hover-border-color:		$gray-300;

$pagination-active-color:			$pagination-color;
$pagination-active-bg:				transparent;
$pagination-active-border-color:	$pagination-border-color;


// List Group

$list-group-bg:						#fff;
$list-group-border-color:			rgba(#000, .125);

$list-group-hover-bg:               $gray-100;
$list-group-active-color:			$body-color;
$list-group-active-bg:				$list-group-bg;
$list-group-active-border-color:	$list-group-border-color;

$list-group-disabled-color:         $gray-500;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:			$gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:	$body-color;
$list-group-action-active-bg:       $gray-200;


// Nav

$nav-tabs-link-active-color:		$gray-900;


// Embeds (TODO: Use from v4.3 onwards)
$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (16 10),
  (4 3),
  (1 1)
);


// Custom control

$custom-control-indicator-checked-color:        #fff;
$custom-control-indicator-checked-bg:           $blue;
$custom-control-indicator-checked-disabled-bg:  rgba($blue, .5);


// Misc

$card-deck-margin:              10px;
$alert-border-radius:           0;
$product-price-color:           $body-color !default;
$login-box-bg:                  #fcfcfc !default;
$cart-footer-bg:                $gray-100 !default;
$costep-progress-color:         $warning !default;
$offcanvas-cart-footer:         $success !default;
$art-active-bg-color:           #fff !default;
$art-active-border-color:       rgba(0,0,0, 0.2) !default;
$product-detail-addtocart-box-bg:   $gray-100 !default;